<body></body>
<script>
    // 假设 file 是一个 File 对象，它是通过 input[type=file] 获取的
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.png';
fileInput.onchange = function(event) {
  const file = event.target.files[0];
  if (file.type !== 'image/png') {
    alert('请选择一个 PNG 图像文件');
    return;
  }

  // 创建一个 FileReader 读取文件内容
  const reader = new FileReader();
  reader.onload = function(e) {
    const dataUrl = e.target.result;

    // 使用 canvas 将 png 转换为 jpg
    const canvas = document.createElement('canvas');
    canvas.width = 200; // 或者其他宽度
    canvas.height = 200; // 或者其他高度
    const ctx = canvas.getContext('2d');

        // 设置背景颜色
        ctx.fillStyle = 'red'; // 白色背景
        ctx.fillRect(0, 0, canvas.width, canvas.height);

    const img = new Image();
    img.onload = function() {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      const jpgDataUrl = canvas.toDataURL('image/jpeg');

      // 创建一个新的 Blob 对象
      const blob = dataURLToBlob(jpgDataUrl);
      console.log(blob); // 输出 Blob 对象，你可以在这里处理这个 Blob 对象
          // 创建一个 Blob 链接
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'image.jpg'; // 设置文件名，默认为 image.png
    link.innerText = 'Download Image';

    // 添加到 body 并触发 click 事件来开始下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // 清理
    };
    img.src = dataUrl;
  };
  reader.readAsDataURL(file);
};

// 辅助函数：将 DataURL 转换成 Blob
function dataURLToBlob(dataURL) {
  const parts = dataURL.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const byteCharacters = atob(parts[1]);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 1024) {
    const slice = byteCharacters.slice(offset, offset + 1024);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: contentType });
  return blob;
}
document.body.appendChild(fileInput)
</script>